<template>
  <div class="home-container">
    <div class="content">
      <el-row style="width: 100%">
        <el-col :span="6">
          <ComLeft class="flexcom comleft"></ComLeft>
        </el-col>
        <el-col :span="12">
          <ComCenter class="comcenter"></ComCenter>
        </el-col>
        <el-col :span="6">
          <ComRight class="flexcom comright"></ComRight>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup lang="ts" name="home">
//@ts-ignore
import ComLeft from "@/views/dataScreen/component/ComLeft.vue";
//@ts-ignore
import ComRight from "@/views/dataScreen/component/ComRight.vue";
//@ts-ignore
import ComCenter from "@/views/dataScreen/component/ComCenter.vue";
</script>

<style scoped lang="scss">
.home-container {
  // background: red !important;
  // background-color: rgba(255, 255, 255, 1);

  width: 100%;
  display: flex;
  flex-direction: column;
  .header {
    height: 74px;
    line-height: 74px;
    font-size: 16px;
    font-family: Roboto;
    margin-left: 10px;
    .menuIcon {
      width: 24px;
      height: 24px;
      display: inline-block;
      vertical-align: middle;
      margin: 0 20px 0 10px;
      // background: url("../../assets/image/home/headerMenu.svg");
    }
  }
  .content {
    display: flex;
    flex-direction: row;
    flex: 1;
    padding-top: 10px;
    // background: #f3f5f7;
    background: #fff;

    .comleft {
      margin-left: 10px;
      min-width: 300px;
    }
    .comcenter {
      flex: 1;
      margin: 0 10px;
    }
    .comright {
      margin-right: 10px;
      min-width: 300px;
    }
  }
}
</style>
